body {
    min-width: 320px;
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #fff;
    // max-width: 750px;
  }
  header {
    height:2.933333rem;
    background-image:linear-gradient(180deg,#f24c59 0%,#f28c4c 100%);
    padding-top: 1.813333rem;
    box-sizing: border-box;
    .search {
      display: flex;
      justify-content: center;
      position: relative;
     width:9.2rem;
     height: .853333rem;
      margin: 0 auto;
      input {
        width: 7.946667rem;
        height: .853333rem;
        border: 0;
        outline:none;
        border-radius: 2.48rem;
        padding-left: 1.226667rem;
        box-sizing: border-box;
        font-size: .373333rem;
        &::placeholder {
          color:#b0b8c2;
        }
      }
      &::before {
        content: "";
        width: .373333rem;
        height: .373333rem;
        background: url(../imgaes/Search\ Glyph@3x.png) no-repeat;
        background-size: contain;
        position: absolute;
        left:.666667rem;
        top:.266667rem;
      }
      span {
        text-align: center;
        color: #fff;
        font-size: .24rem;
        margin-left: .4rem;
        img {
          width: .426667rem;
          height: .426667rem;
          margin: 0 auto;
        }
      }
    }
  }
  .tab {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
     .tas {
         width: 2.773333rem;
        //  height: 17.333333rem;
         background-color: #f6f7fb;
         h3 {
             width: 100%;
             height: 40px;
             line-height: 1.066667rem;
             text-align: center;
             color:#06121e;
             font-size: .426667rem;
             background-color: #fff;
             margin-top: .533333rem;
             i {
                display: inline-block;
                width:.133333rem;
                height:.373333rem;
                background-color:#ff6200;
                border-radius:.08rem;
                margin: .133333rem .133333rem 0 0;
             }
         }
         ul {
             width: 100%;
             height: 17.04rem;
             display: flex;
             flex-wrap: wrap;
             background-color:#f6f7fb;
            border-radius:0px .266667rem 0px 0px;
             li {
                 width: 100%;
                 height:.533333rem;
                 line-height: .533333rem;
                 text-align: center;
                 font-weight:700;
                 color:#6a6c6b;
                 font-size:.426667rem;
             }
             li:nth-child(1) {
                margin-top: .72rem;
             }

         }
     }
     .sp {
         width: 7.226667rem;
         height: auto;
         ul {
             width: 100%;
             height: auto;
             display: flex;
             justify-content: space-around;
             margin-bottom: .533333rem;
             li {
                 width: 1.6rem;
                 height: 1.866667rem;
                 text-align: center;
                 color:#3c434d;
                 font-size:.266667rem;
                //  line-height:14px;
                 img {
                     width: 1.6rem;
                     height: 1.6rem;
                 }
             }
         }
     }
  }
  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.413333rem;
    background-color:#ffffff;
    box-shadow:.08rem .106667rem .56rem rgba(6, 0, 1, 0.14);
    display: flex;
    justify-content: space-evenly;
    a {
      display: block;
      flex: 20%;
      text-align: center;
      color:#707070;
  font-size:.266667rem;
      img {
        width: .533333rem;
        height: .533333rem;
        margin: .266667rem auto .133333rem;
      }
    }
  }